<template>
  <uv-navbar
    :title="pageTitle"
    placeholder
    bg-color="#fff"
    auto-back
    left-icon-color="#757575"
    title-style="color: #000000; font-size: 32rpx"
  >
    <template #right>
      <uv-text text="提交" color="#4EA770" size="28rpx" @click="handleSubmit" />
    </template>
  </uv-navbar>
  <view class="row" @click="showUser">
    <view class="row-label">
      {{
        [3, 8, 14].includes(forms.type)
          ? "退回至人员"
          : forms.type == 5
          ? "指定人员"
          : "--"
      }}
    </view>
    <view class="row-value"> {{ personName || "请选择人员" }}</view>
  </view>
  <view class="row-input">
    <view class="row-label">
      {{
        [3, 8, 14].includes(forms.type)
          ? "退回原因"
          : forms.type == 5
          ? "备注"
          : "--"
      }}
    </view>
    <uv-textarea
      v-model="forms.remark"
      auto-height
      :placeholder="`请输入${
        [3, 8, 14].includes(forms.type)
          ? '退回原因'
          : forms.type == 5
          ? '备注'
          : '--'
      }`"
      border="none"
    />
  </view>
  <uv-popup ref="userRef" mode="bottom" round="16rpx" @maskClick="closeUser">
      <view>
        <uv-toolbar
          confirm-color="#4EA770"
          title="选择人员"
          @cancel="closeUser"
          @confirm="confirmUser"
        />
        <uv-search
          placeholder="请输入搜索人员"
          v-model="maintenanceUser"
          :show-action="false"
          :maxlength="50"
          margin="auto 30rpx 30rpx"
        />
        <scroll-view scroll-y style="height: 40vh">
          <uv-radio-group
            v-model="maintenanceUserId"
            placement="column"
            icon-placement="right"
            border-bottom
            active-color="#4EA770"
          >
            <uv-radio
              v-for="i in filterUserList"
              :key="i.userId"
              :name="i.userId"
              :label="i.userNickName"
              :label-color="maintenanceUserId == i.userId ? '#4EA770' : '#303133'"
              :custom-style="{
                padding: '20rpx',
              }"
            />
          </uv-radio-group>
        </scroll-view>
      </view>
    </uv-popup>
</template>
<script setup>
import { reactive, ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addOrderRecord, getOrderDetail, maintenanceUserList } from "@/request/order";

const forms = reactive({
  workOrderId: "", // 工单id
  remark: "", // 备注信息
  type: "", // 审核类型
  maintenanceUserId: null, // 维修人员ID
  // informUserId: [], // 通知人员ID
});
const orderInfo = ref({}); // 工单详情
const userRef = ref(); // 人员弹窗ref
const userList = ref([]); // 人员列表
const maintenanceUser = ref(''); // 临时搜素名称
const maintenanceUserId = ref(null); // 临时维修人员

const pageTitle = computed(() => {
  if ([3, 8, 14].includes(forms.type)) {
    return "退回工单";
  } else if (forms.type == 5) {
    return "指定工单";
  }
});

// 获取过滤后的操作人员列表
const filterUserList = computed(() => {
  return userList.value?.filter((i) => {
    return i.userNickName.includes(maintenanceUser.value);
  });
});

// 人员名称
const personName = computed(() => {
  let name = "";
  if (forms.type == 3) {
    name = orderInfo.value?.createByNickName;
  }
  if (forms.type == 5) {
    name = userList.value?.find((i) => i.userId == forms.maintenanceUserId)?.userNickName;
  }
  if ([8, 14].includes(forms.type)) {
    forms.maintenanceUserId = orderInfo.value?.maintenanceUserId;
    name = orderInfo.value?.maintenanceUserNickName;
  }
  return name;
});

onLoad((e) => {
  forms.workOrderId = e.id;
  forms.type = parseInt(e.type);
  getData();
  getUserList();
});

// 提交工单操作记录
const handleSubmit = () => {
  if (forms.type == 5) {
    if (!forms.maintenanceUserId) {
      uni.showToast({
        title: "请选择维修人员",
        icon: "none",
      });
      return;
    }
  }
  let data = Object.assign({}, forms);
  addOrderRecord(data).then((res) => {
    if (res.code == 200) {
      uni.showToast({
        title: "提交成功",
        icon: "success",
        success: () => {
          setTimeout(() => {
            uni.$emit("order");
            uni.navigateBack({
              delta: 1,
            });
          }, 1500);
        },
      });
    }
  });
};

// 获取工单详情
const getData = () => {
  getOrderDetail(forms.workOrderId).then((res) => {
    if (res.code == 200) {
      orderInfo.value = res.data;
    }
  });
};

// 获取人员列表
const getUserList = () => {
  maintenanceUserList().then((res) => {
    if (res.code == 200) {
      userList.value = res.data;
    }
  });
};

// 显示选择人员弹窗
const showUser = () => {
  if (forms.type == 5) {
    userRef.value.open();
    maintenanceUserId.value = forms.maintenanceUserId;
  }
};

// 关闭选择人员弹窗
const closeUser = () => {
  userRef.value.close();
  maintenanceUserId.value = null;
};

// 确认选择人员弹窗
const confirmUser = () => {
  forms.maintenanceUserId = maintenanceUserId.value;
  closeUser();
};
</script>
<style lang="scss" scoped>
@import "@/uni.scss";

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx;
  border-bottom: 2rpx solid #dedede;

  &-value {
    font-size: 28rpx;
    color: #212121;
    max-width: 500rpx;
  }
}

.row-input {
  padding: 40rpx;
}

.row-label {
  font-size: 28rpx;
  color: #757575;
}
</style>
